<template>
    <div class="box">
        <h3>{{ Hint }}</h3>
        <el-form :model="User" status-icon :rules="rules" ref="User" label-width="100px">
            <el-form-item label="用户名" prop="UsernName">
                <el-input v-model="User.UsernName"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="Password">
                <el-input type="password" v-model="User.Password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('User')">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("用户名不能为空"));
            } else if (value != "admin") {
                callback(new Error("你输入的用户名不对"));
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value == 123456) {
                callback();
            } else if (!value) {
                callback(new Error("密码不能为空"));
            } else {
                callback(new Error("你输入的密码不对"));
            }
        };
        return {
            User: {
                UsernName: 'admin',
                Password: 123456
            },
            rules: {
                Password: [{ validator: validatePass, trigger: "blur" }],
                UsernName: [{ validator: checkAge, trigger: "blur" }],
            },
            inptuName: '',
            inputWord: '',
            Hint: '',
            // 最近登录时间
            LatesTime: ''
        }
    },
    //计算属性
    computed: {

    },
    //监听
    watch: {

    },
    //方法
    methods: {
        // 获取现在时间
        GetDate() {
            //获取现在的时间
            var date = new Date();
            let y = date.getFullYear();//获取现在的年份
            let m = date.getMonth();//获取现在的月份
            let dates = date.getDate();//获取现在的号数
            let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            let d = date.getDay();//算出星期几
            let h = date.getHours();//算出小时
            let min = date.getMinutes();//算出分钟
            this.LatesTime = y + '年' + (m + 1) + '月' + dates + '日' + h + '时' + min + '分' + arr[d];
            // 将计算出来的时间传到vuex里
            return this.$store.commit('MuLatesTime', this.LatesTime)
        },
        ck() {
            const data = JSON.parse(localStorage.getItem('Data'))
            // 只有两个输入框都有值时才能登录成功
            if (data.UserName == this.a && data.PassWord == this.b) {
                const Obj = {
                    UserName: this.a,
                    PassWord: this.b,
                }
                localStorage.setItem('inputData', JSON.stringify(Obj))
                // 本地存储登录的账号再跳转到home
                this.$router.push({ name: 'homepage' })
            } else {
                alert('请输入账号或密码')
            }
        },
        // 登录按钮
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$message({
                        message: '恭喜你,登录成功!',
                        type: 'success'
                    });
                    // 获取最近登录时间
                    this.GetDate()
                    localStorage.setItem("用户名", this.User.UsernName);
                    localStorage.setItem("密码", this.User.Password);
                    this.$router.push({ name: 'homepage' });
                } else {
                    alert("登录失败,密码或用户名错误");
                    return false;
                }
            });
        },
    },

    //组件
    components: {

    },
    // 生命周期
    mounted() {


    },
    created() {
        // 计算日期
        let date = new Date();
        // 计算小时
        let hour = date.getHours();
        if (hour < 12) {
            this.Hint = 'Good moring,Welcome Back!';
        } else if (hour < 18 && hour >= 12) {
            this.Hint = 'Good afternoon,Welcome Back!';
        } else {
            this.Hint = 'Good night,Welcome Back!';
        }
    },
}
</script>

<style lang="less" scoped>
.box {
    border-radius: 20px;
    margin: 200px auto;
    width: 400px;
    height: 350px;
    outline: 1px solid #f2f4f6;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);


    h3:nth-child(1) {
        font-weight: 800;
        // 渐变字
        background-image: -webkit-linear-gradient(0deg,
                #ff4b2b,
                #ff416c);
        -webkit-background-clip: text;
        color: transparent;
    }

    h3 {
        font-size: 23px;
        display: block;
        text-align: center;
        color: #505458;
        line-height: 80px;
    }

    .el-form-item {
        font-weight: 800;
    }

    .el-form {
        height: 200px;
        margin: 10% auto;
        margin-right: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .el-input {
        width: 200px;
    }

    .el-button {
        transition: all 0.1s linear;
        font-weight: 800;
        margin-right: 20px;
        border: 0;
        background: linear-gradient(to right, #ff4b2b, #ff416c);
    }

    .el-button:hover {
        transform: scale(1.1);
    }
}
</style>